<template>
  <div>
    <a-modal
      v-model:visible="visible"
      :footer="null"
      title="上传列表"
      @ok="handleOk"
    >
      <div class="prompt">
        注：如果当前有视频正在上传时，请勿关闭系统，否则会导致上传终止！
      </div>
      <div v-for="(item, index) in toDay" :key="index">
        <div>今天</div>
        <div class="item">
          <div class="item-title">
            {{ item.businessType == 1 ? "磨课" : "评课" }}
          </div>
          <div class="item-content">
            <div>{{ item.name }}</div>
            <a-progress type="circle" :percent="0.18" :width="35" />
          </div>
        </div>

        <div v-for="(item, index) in beFore" :key="index">之前</div>
        <div class="item">
          <div class="item-title">
            {{ item.businessType == 1 ? "磨课" : "评课" }}
          </div>
          <div class="item-content">
            <div></div>
            <a-progress type="circle" :percent="0.18" :width="35" />
          </div>
        </div>
      </div>
      <!-- 空数据 -->
      <!-- <a-empty /> -->
    </a-modal>
  </div>
</template>
<script>
import { getlistClientUploadLog } from "@/api/file.js";
export default {
  data() {
    return {
      visible: false,
      toDay: [],
      beFore: [],
    };
  },
  created() {},
  mounted() {},
  methods: {
    show() {
      this.visible = true;
      this.getlist();
    },
    handleOk() {
      this.visible = false;
    },
    async getlist() {
      const res = await getlistClientUploadLog({
        macAddress: localStorage.getItem("macAddress"),
      });
      this.toDay = res.data.todayUploads;
      this.beFore = res.data.beFore;
      console.log(res, "文件上传记录");
    },
  },
};
</script>
<style lang="less" scoped>
.popover-btn {
  width: 100px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #e5e6eb;
}

.prompt {
  background: #fff5e6;
  color: #e69c2d;
  padding: 0 10px;
  margin-bottom: 10px;
}
.item {
  width: 100%;
  border: 1px solid #d7d7d7;
  border-radius: 4px;
  height: 35px;
  margin-bottom: 10px;
  display: flex;
}
.item-title {
  background: #f2f5ff;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.item-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
</style>
